<script setup lang="ts">
import {ref,onMounted,onUnmounted} from "vue"
import {getDate} from "@/utils/tool.ts"

//关于时间
let nowtime=ref("")
//定义一个变量接受setTimeout
let interval=null;

onMounted(()=>{
  nowtime.value=getDate()

  interval=setInterval(()=>{
      nowtime.value=getDate()
  },1000)
})

onUnmounted(()=>{
  clearInterval(interval)
})


</script>

<template>
  <div class="home">
     <header>
        <h1>积云教育可视化面板</h1>
        <p>当前时间:{{nowtime}}</p>
     </header>
  </div>
</template>
<style lang="scss">
.home{
  width:100%;
  height:100%;
  background:url('../assets/images/bg.jpg');
  background-size:100% 100%;
}
header{
  height:1.25rem;
  background: url("../assets/images/head_bg.png");
  background-size:100% 100%;
  position: relative;
  h1{
    height:1rem;
    line-height: 1rem;
    font-size:.475rem;
    color:#fff;
    text-align: center;
  }
  p{
    position: absolute;
    height:1rem;
    line-height: 1rem;
    right:.375rem;
    font-size:0.25rem;
    color:rgba(255, 255, 255, 0.7);
    top:0;
  }
}
</style>
